import { Header } from "./header";
import Name from "../cook/cook";
import Link from "next/link";

export default async ({ children }: { children: JSX.Element }) => {

    const but = {
        backgroundColor: '#00BCD4',
        borderRadius: '5px',
        padding: '2px 20px',
        border: '2px solid black',
    };

    return (
        <div>
            <Header name={<Name />} />

            <div style={{ float: 'left', width: '200px', padding: '10px', backgroundColor: '#f4f4f4', borderRight: '1px solid #ddd', height: '87vh' }}>
                <div style={{marginTop: '15px'}}>
                    <Link style={but} href={'/list'}>List</Link>
                </div>
                <div style={{marginTop: '15px'}}>
                    <Link style={but} href={'/setting'}>Setting</Link>
                </div>
                <div style={{marginTop: '15px'}}>
                    <Link style={but} href={'/client'}>Client</Link>
                </div>
            </div>

            <div>
                {children}
            </div>
        </div>

    );
}